LESS

CSS编译语言

编译

浏览器中使用：less.min.js

<script src="less.min.js" type="text/javascript" charset="utf-8"></script>

Node中编译

lessc demo.less  // 直接在cli中输出

lessc demo.less test.css // 将把demo.less 编译到 test.css 中 （lessc url newUrl）

lessc --clean-css demo.less test.css // 将demo.less 编译到 test.css 文件并且压缩 (插件：less-plugin-clean-css)

工程化工具

fis使用插件： fis-parser-less

match();中配置插件，然后处理拓展名。

fis.match('**.less', {
    parser: fis.plugin('less'),
    rExt: '.css'
});

gulp使用插件：gulp-less

var gulp =  require('gulp'),
    less = require('gulp-less');


// 编译less
gulp.task('less1', function () {
    
    gulp.src('*.less')
        .pipe(less())
        .pipe(gulp.dest('test'));
    
});

// 启动任务
gulp.task('default', ['less1']);

嵌套规则

通过 {} 来嵌套处理。大括号内部定义的元素的样式。

body {
    div {
        width: 100px;
        height: 100px;
        background: cyan;
    }
}

    

变量

通过 less @ 来定义变量

定义：@space: 100px;
使用：width: @space

@space: 20px;
@BgColor: cyan;
@color: #fff;

ul {
    padding: @space * .5;
    background: @BgColor;
    width: @space * 6; 
    height: @space * 2;
    li {
        float: left;
        width: @space * 2;
        height: @space;
        list-style: none;
        text-align: center;
        line-height: @space;
        a {
            color: @color;
            padding: @space*.15 @space*.15;
            text-decoration: none;
        }
    }
    li:hover {
        background: @color;
        a {
            color: @BgColor;
        }
    }
}

混合

在Less中对继承的一种实现，混合是创建一个类，并且将该类在其它类中实现。
定义：.link-style {}
使用：.demo1 { a { .link-style } }

// mix 混合
.box-style {
    width: 400px;
    height: 300px;
    background: cyan;
    margin: 0 auto;
}

.box1 {
    .box-style;
    background: tan;
}

.box2 {
    .box-style;
    width: 1000px;
}

方法传参

混合是一种继承，多个类继承的样式是不一样的。可以对混合函数传参。
定义： .className( @arg ) { width: @arg; }
使用： .classname(100px);

// mix 传参
.box-style( @w ) {
    width: @w * 10;
    height: 300px;
    background: cyan;
    margin: 0 auto;
}

.box1 {
    .box-style(400px);
    background: tan;
}

.box2 {
    .box-style;
    width: 1000px;
}

混合和方法区别：
在编译后，定义的混合还存在，变成CSS文件中的普通的样式条
在编译后，定义的方法在CSS文件中不存在.

如果没有指定默认参数，使用方法的时候，并未传递参数，编译的时候，会报错。

默认参数

定义：.className( @w: 100px ) { width: @w; }

.box-style( @w: 100px ) {
    width: @w * 10;
    height: 300px;
    background: cyan;
    margin: 0 auto;
}

arguments

表示方法中的所有参数。实现对所有变量的引用

.box-border ( @w: 1px, @s: solid, @c: #ccc) {
    border: @arguments;
}

.box {
    margin-bottom: 10px;
    .box-border(1px, solid, cyan);
}
.box1 {
    .box-border();
}

improtant

提升权重
在less中important 不仅仅可以对单个css属性添加，还可以对方法添加，实现对继承多个属性的important属性提升权重。

.box {
    .box-style(100px) !improtant;
    color: #ccc !improtant;
}

条件判断

通过用when() 方法来判断条件。（注意：不需要添加单位）.
类似switch条件判断

.size ( @w, @h ) when ( @w > 200 ) {
    width: @w;
    height: @h;
}

.size (@w, @h ) when ( @w = 200 ) {
    width: @w;
    height: @h;    
}

.size ( @w, @h ) when ( @w < 200 ) {
    width: @w;
    height: @h;
}

使用关键字 and 和 not
多个条件 and, 配合when 关键字 使用 : when () and ()
否定判断条件 not, 配合 when 关键字 使用 ： when not()

// 判断在 300 - 500 范围之间
.size ( @w, @h ) when ( @w > 300 ) and ( @w < 500 ) {
    width: @w;
    height: @h;
}  

---

// 判断不小于200
.size( @w, @h ) when not( @w < 200 ) {
    width: @w;
    height: @h; 
}
   

内置函数

Math函数

floor(): 向下取整
ceil() ： 向上取整
round() : 四舍五入
percentage(); 将数值转化为百分数，(一般参数中不需要带%单位)
min(); 参数中的最小值，单位值需要统一，如果参数存在单位不同，会报错。如果参数中没有带单位，编译后的值也是没有单位。
max(); 参数中最大值。单位值需要统一，如果参数存在单位不同，会报错。如果参数中没有带单位，编译后的值也是没有单位。

div {
    width: ceil(100.1px);
    height: floor(100.8px);
    margin-top: round(20.5em);
}

p {
    width: percentage(1);
}

h1 {
    width: max(200, 100px, 300, 230px);
    height: min(30px, 31px, 20px);
    background: tan;
}

色彩函数

rgb()
rgb(red, green, blue);
把原始的rgb值转成16进制色值.(注意不可使用变量)

background: rgb(100, 12, 109); // 编译后：background: #640c6d;

---

// 编译报错
@color: '100';
div {
    background: rgb(@color, @color, @color);  
}

rgba()
rgba(red, green, blue ,alpha);
编译后按照原来的rgba();的格式显示在CSS中

background: rgba(100, 12, 109, .3); // 编译后： background: rgba(100, 12, 109, 0.3);

hsl()
hsl(h, s, l);
表示色相，饱和度，亮度模式.
h: 某一色值(0-360)
s：色彩饱和度, 单位百分数。
l: 亮度，单位百分数。0%表示黑色，100%表示白色.
编译成CSS之后是16进制数值

background: hsl(200, 30%, 10%); // 编译后： background: #121c21;

色彩通道

red() 获取定义色值中的红色通道
green(); 获取定义色值的绿色通道
blue(); 获取定义色值的蓝色通道。
alpha(); 获取定义的rgba();的alpha();透明度通道

background: rgb(red(@color), red(@color), red(@color)); 
background: rgb(green(@color), green(@color), green(@color));
background: rgb(blue(@color), blue(@color), blue(@color));
background: rgba(red(@color), green(@alphaColor), blue(@color), alpha(@alphaColor));

hue(); 获取色彩中的色值，结果是一个数字
saturation(); 获取色彩中的饱和度，结果是一个百分数
lightness(); 获取色彩中的亮度，结果百分数

@color: #00BCD4;

background: rgb(hue(@color), hue(@color), hue(@color)); // background: #bbbbbb;
margin: hue(@color); // margin: 186.79245283;
width: saturation(@color); // width: 100%;
height: lightness(@color);  // height: 41.56862745%;  

色彩操作

fade(); 对色彩做透明度处理
fade(color, alpha);

background: fade(@color, 10%); 

fadeIn(); 对色彩透明度增加，当第一个参数不透明的颜色，得到的结果是一个16进制不透明颜色。（增加到最大值100%了）

background: fadeIn(@color, 10%); 

fadeOut(); 对色彩透明减少

background: fadeOut(@color, 90%);

greyscale(); 得到是一个混色灰度色值

 background: greyscale(@color);    
 

mix(); 将两种颜色混合，默认情况下，是取两种颜色的十六进制转为十进制相加后的平均值。第三个参数表示去的数值，是个百分数，表示色彩混合的一个权重。

background: mix(@color, @color2);
background: mix(@color, @color2, 30%); 

saturate(); 增加饱和度
参数1：颜色。
参数2：饱和度的增加量

background: saturate(@color2, 30%);

desaturate(); 减少饱和度

background: desaturate(@color2, 30%);

lighten(); 提高色彩亮度
参数1：颜色
参数2：提高的亮度值

background: lighten(@color2, 50%);

darken(); 降低颜色亮度

background: darken(@color2, 50%);

色彩混合

只能处理色彩，不能处理图片
softlight(); 柔光处理
参数1： 底色
参数2：添加色
hardlight(); 强光处理
参数1： 底色
参数2：添加色

background: softlight(@color, @color2); 
background: hardlight(@color, @color2); 

字符串函数

escape(); 将字符串做url转码
参数：需要转码的字符串

e(); 不对字符串做编译

background: e('rgba(10, 200, 210, .3)');

replace(); 替换字符串的子字符串
参数1：源字符串
参数2：被替换的字符串
参数3：替换的字符串

div {
    content: relace('this color is tan', 'tan', 'cyan');
}

命名空间

& : 当前所在的class
引用混合时，要将属性赋值给谁就放在谁的里面

.box1 {
    .bg {
        background: tan;
    }
}
.box2 {
    .header {
        .box1 .bg;
   }
}

作用域

在Less中，作用域是块级作用域，定义在块内部的变量，在外界访问不到。
访问变量的顺序，就近原则。
对于函数，它的存在依赖块级作用域，定义在块内部的函数，在外界访问不到，但是可以使用命名空间使用它。
对于变量，它存在依赖块级作用域，定义在块内部的变量，外界访问不到，不能通过命名空间访问，是一种私有变量。

@w: 100px;

.box1 {
    .sayW(){
        @w: 300px;
    }    
    width: @w;
    .sayW();
}

.box1{
    p {
        width: @w;
    }
}

.box2 {
    width: @w;
}

如果函数在块中执行后，函数作用域会扩展带过去。也就是变量在定义的块中可以访问。

@w: 100px;

.box1 {
    .sayW(){
        @w: 300px;
    }    
    width: @w;
    .sayW();
}

.box1{
    p {
        width: @w;
    }
}

.box2 {
    .box1 .sayW(); // 函数通过命名空间执行
    width: @w; // @w: 300px;
}

文件导入

语法：@import url;
通过@import导入一个文件内容，Less文件中，可以使用导入文件中的变量，混合，方法。编译后，被导入的文件中的内容会保留下来。(导入的文件也会被编译)

@import 'base/var.less';

插值

语法：@{key}
作用：将变量插入一个字符串中(注意：key前面没有@符号，@符号放在{}外面)

div {
    content: '@{content}下雨了，下雨天';
}

---

@dir: top;

div {
    bottom-@{dir}: 1px solid cyan;
}

表达式

在Less的字符串中，使用JavaScript表达式；
content: `['h', 'e', 'l', 'l'].join('')`;
需要在``中编写JavaScript表达式.

div {
    content: `['h', 'e', 'l', 'l', 'o'].join('')`;
}

Less目录结构

根据项目需求使用Less目录的结构

app.less 入口文件
variables.less 全局变量 
mixins.less 全局混淆
init.less 初始化页面
mixins.less 全局混淆
scaffoldings.less 布局
form.less 表单组件
utils.less 工具类
buttons.less 按钮组件
nav.less 导航组件
list.less 列表组件
footer.less 底部导航